<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
				*{
					margin: 0;
					padding: 0;
				}
			div{
				width: 100px;
				height: 50px;
				background-color: red;
				/* 告诉系统哪个属性需要执行过渡的效果 */
				transition-property: width,background-color;
				/* 告诉系统效果持续的时长 */
				transition-duration: 2s,5s;
				
			 
				
			}
			/* :hover 伪类选择器除了可以用在a标签上 还可以用在其他任何标签上 */
			div:hover{
				width: 300px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		
		<!-- 
	过渡效果三要素
	 
	 1.必须要有 属性发生变化
	 2.必须告诉系统哪个属性需要执行过渡效果
	 3.必须告诉系统过渡效果持续时长
		 
		 
	注意点:
		 当多个属性需要同时执行过渡效果时
		 用逗号隔开
		 transition-property: width,background-color;
		 transition-duration: 2s,5s;
		 -->
		
		
		<div></div>
		
		
		
	</body>
</html>